<template>
  <div id="app">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6" :lg="7" :xl="6">
        <h1>欢迎来到东大星问卷系统</h1>
        <el-image
          :src="require('@/assets/images/logo.png')"
          style="width: 175px; height: 210px; margin: 0"
        ></el-image>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>

      <el-col :span="6">
        <el-form
          :model="NameForm"
          ref="NameForm">
        <h2 style="margin-left: -60%;margin-bottom: -5%"><font size="6px">密保找回</font></h2>
        <el-form style="margin-bottom: 3%;">
        <router-link to="/login" 
                  style="margin-left:60%">
                  <font size="3px">想起来了？点我登录</font> 
                </router-link>
              </el-form>
          <el-form-item prop="name" style="margin-bottom: 5%;">

            <el-input v-model="NameForm.username" 
            style="width:90%;margin-left: 5%" 
            placeholder="请输入用户名"
            @blur="getquestion('NameForm')"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="secQues" style="margin-bottom: 5%;">
            <el-input v-model="FindForm.secQues" 
            style="width:90%;margin-left: 5%" 
            placeholder="密保问题" 
            :disabled="true"
            ></el-input>
          </el-form-item> -->
          <h2 style="margin-left: 7%;margin-top:-2%;float:left" ><font size="5px">密保问题：{{FindForm.secQues}}</font></h2>
        </el-form>

        <el-form
        :model="FindForm"
        :rules="secondrules"
        ref="FindForm">

          <el-form-item prop="secAnsw" style="margin-bottom: 5%;">
            <el-input v-model="FindForm.secAnsw" style="width:90%;margin-left: 5%;" placeholder="请输入密保答案"></el-input>
          </el-form-item>
          <el-form-item prop="password1" style="margin-bottom: 5%;">
            <el-input v-model="FindForm.password1" style="width:90%;margin-left: 5%;" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item prop="password2" style="margin-bottom: 5%;">
            <el-input v-model="FindForm.password2" style="width:90%;margin-left: 5%;" placeholder="请确认新密码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" 
            style="width:90%;margin-left: 7%;" 
            @click="submitForm('FindForm')"
            >确定</el-button>
            <router-link to="/PhoneFind" 
              style="margin-left:">
              <font size="3px">密保忘记？手机验证找回</font> 
            </router-link>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PasswordFind",
  data() {
    return {
      NameForm:{
        username:""
      },
      FindForm: {
        name: "",
        secQues: "",
        secAnsw: "",
        password1: "",
        password2: "",
      },
      secondrules:{
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        secAnsw: [
          { required: true,message: "请输入密保问题答案", trigger: "blur" }
        ],
        password1: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "change" },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.FindForm.password2 === "") {
                callback(new Error("请再次输入密码"));
              } else if (
                this.FindForm.password2 != this.FindForm.password1
              ) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      }
    };
  },
  created() {
    this.name = window.sessionStorage.getItem("name"); //取出session里的path,动态修改activePath
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return;
        }
        await this.$http({
          method: "post",
          url: "/identifySq",
          data: {
            name:this.FindForm.name,
            answer:this.FindForm.secAnsw,
            passwd:this.FindForm.password1,
          }
        }).then((response) => {
            //访问后端
            const res = response.data;
            console.log("12345");
            if (res.code == "666") {
              //访问成功
              this.$message.success(res.message);
              this.$router.push("/login");
            } else {
              //访问失败
            console.log("54321");
              this.$message.error(response.message);
            }
          })
          .catch((error) => {
            // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
            // console.log(error);
            if (error.response) {
              // 请求已发出，但服务器响应的状态码不在 2xx 范围内
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log("请求未发出", error.message);
            }
          });
        console.log("error submit!!");
        return false;
      });
    },
    getquestion(formName){
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return;
        } 

          await this.$http({
          method: "post",
          url: "/sqSelect",
          data: {
            name:this.NameForm.username
          },
        }).then((response) => {
            //访问后端
            const res = response.data;

            if (res.code == "666") {
              //访问成功
              this.FindForm.secQues=res.data.question;
              this.FindForm.name=this.NameForm.username;
            } else {
              this.$message.error(res.message)
              //访问失败
            }
          })
          .catch((error) => {
            // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
            // console.log(error);
            if (error.response) {
              // 请求已发出，但服务器响应的状态码不在 2xx 范围内
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log("请求未发出", error.message);
            }
          });
        console.log("error submit!!");
        return false;
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.el-row {
  height: 100vh;
  display: flex;
  align-items: center;
}
.el-divider {
  height: 200px;
}
#app {
  background-image: url("@/assets/images/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}
</style>